<template>
  <div class="ele-body">
    <!--筛选-->
    <el-card shadow="never" style="min-height: 50px;position: relative">
      <div class="right-handle-group" style="cursor: pointer">
        <a style="margin-left: 8px" @click="toggleAdvanced">
          {{ advanced ? '收起' : '展开' }}
          <i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
        </a>
      </div>
      <el-collapse-transition >
        <div class="searchWrap" v-show="advanced">
        <div>
          <div class="searchBox"><span>状态:</span>
            <div @click="selectAll('statusActiveNum')"
                 class="searchItem"
                 :class="statusActiveNum===null ? 'active':''">全部</div>
            <div @click="searchByStatusVersion(item,index)" class="searchItem"
                 :class="statusActiveNum === index ? 'active':''"
                 v-for="(item,index) in statusesList" :key="item">{{ item }}
            </div>
          </div>
          <div class="searchBox"><span>事件类型：</span>
            <div @click="selectAll('activeNum')"
                 class="searchItem"
                 :class="activeNum===null ? 'active':''">全部</div>
            <div @click="searchByType(item,index)" class="searchItem"
                 :class="activeNum === index ? 'active':''" v-for="(item,index) in typesList"
                 :key="item">{{ item }}
            </div>
          </div>
          <div class="searchBox"><span>时间范围：</span>
            <div @click="selectAll('dateActiveNum')"
                 class="searchItem"
                 :class="dateActiveNum===null ? 'active':''">全部
            </div>
            <div @click="searchByDate(item,index)" class="searchItem"
                 :class="dateActiveNum === index ? 'active':''" v-for="(item,index) in dateList"
                 :key="index">{{ Object.keys(item)[0] }}
            </div>
          </div>
        </div>
      </div>
      </el-collapse-transition>
      </el-card>
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <el-form :model="where" class="ele-form-search" label-width="90px" @keyup.enter.native="reload"
               @submit.native.prevent >
        <el-row :gutter="15">
          <el-col :lg="6" :md="12">
            <el-form-item label="事件信息:">
              <el-input v-model="where.number" clearable placeholder="请输入事件编号" />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <el-form-item label="客户:">
              <el-input v-model="where.customer_name" clearable placeholder="请输入客户名称" />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <el-form-item label="联系人电话:">
              <el-input v-model="where.contact_phone" clearable placeholder="请输入联系人电话" />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :md="12">
            <div class="ele-form-actions">
              <el-button v-if="permission.includes('sys:event:index')" class="ele-btn-icon" icon="el-icon-search"
                         type="primary" @click="reload">
                查询
              </el-button>
              <el-button @click="reset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <!-- 数据表格 -->
      <ele-pro-table ref="table" :columns="columns" :datasource="url" :selection.sync="selection" :where="where" :height="advanced?'calc(100vh - 460px)':'calc(100vh - 360px)'">
        <!-- 表头工具栏 -->
        <template slot="toolbar">
          <el-dropdown @command="handleCommand">
            <el-button icon="el-icon-plus" size="small" type="primary" v-show="permission.includes('sys:event:add')">
              添加
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in typesList" :key="item" :command="item">{{ item }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="btnWrap" v-if="permission.includes('sys:event:export')">
            <el-button size="small" type="primary" :loading="exportLoading" @click="exportPart" :disabled="!selection.length">
              导出
            </el-button>
          </div>
          <div class="btnWrap">
            <el-button size="small" :loading="exportLoading" type="primary"
                       v-if="permission.includes('sys:event:export')" @click="exportAll">导出全部
            </el-button>
          </div>
        </template>
        <template slot="event_number" slot-scope="{row}">
          <div style="color: var(--color-primary);cursor: pointer" @click="$router.push('/event/event/info?id=' + row.id)">
            {{ row.event_number }}
          </div>
        </template>
      </ele-pro-table>
    </el-card>

  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: 'event',
  components:{

  },
  computed: {
    ...mapGetters(["permission"]),
  },
  data() {
    return {
      // 表格数据接口
      url: '/events',
      // 表格列配置
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: "left"
        },
        {
          prop: 'event_number',
          label: '事件编号',
          minWidth: 200,
          align: 'center',
          showOverflowTooltip: true,
          slot: 'event_number'
        },
        {
          prop: 'type',
          label: '事件类型',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center',
        },
        {
          prop: 'customer_name',
          label: '客户',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center',
        },
        {
          prop: 'contact_name',
          label: '联系人',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center',
        },
        {
          prop: 'contact_telephone',
          label: '电话',
          showOverflowTooltip: true,
          minWidth: 150,
          align: 'center',
        },
        {
          prop: 'address',
          label: '客户地址',
          showOverflowTooltip: true,
          minWidth: 200,
          align: 'center',
        },
        {
          prop: 'product_number',
          label: '出厂编号',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center',
        },
        {
          prop: 'status',
          label: '状态',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center',
        },
        {
          prop: 'created_type',
          label: '创建方式',
          showOverflowTooltip: true,
          minWidth: 100,
          align: 'center',
        },
        {
          prop: 'create_time_format',
          label: '创建时间',
          showOverflowTooltip: true,
          minWidth: 160,
          align: 'center'
        },
      ],
      //
      // 表格搜索条件
      exportLoading:false,
      where: {},
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
      // 是否显示导入弹窗
      showImport: false,
      //状态筛选参数列表
      statusesList:[],
      //类型筛选参数
      typesList:[

      ],
      //状态列表激活
      statusActiveNum:null,
      //类型列表激活
      activeNum:null,
      //筛选展开
      drawer:false,
      //时间范围筛选
      dateActiveNum: null,
      dateList: [
        {今天: 'today'},
        {本周: 'week'},
        {本月: 'month'},
        {本年: 'year'}
      ],
      advanced:true,
    };
  },
  watch:{
    $route() {
      if (this.$router.history.current.path === '/event/event') {
        this.reload()
      }
    }
  },
  beforeMount() {
    let storageEventStatus = localStorage.getItem('event_status') ?? '';
    if (storageEventStatus !== '') {
      if (storageEventStatus === '未完成') {
        this.statusActiveNum = 3
      } else if (storageEventStatus === '今日完成') {
        this.statusActiveNum = 4
      } else if (storageEventStatus === '处理中') {
        this.statusActiveNum = 5
      }
      this.url = '/events?status=' + storageEventStatus
    } else {
      this.url = '/events';
    }
    localStorage.removeItem('event_status');
  },
  created() {
    this.$http.get('/events/params').then(res => {
      let status = res.data.data.statuses
      this.statusesList= status
      this.typesList = res.data.data.types
    }).catch(e => {
      this.$message.error(e.message);
    });
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    /*导出全部*/
    exportAll() {
      this.exportLoading = true
      this.$http.get(`/events?export=1`, {params: this.where}).then((res) => {
        this.exportLoading = false
        if (res.data.code === 0) {
          this.$message.success(res.data.msg);
          const link = document.createElement('a')
          //_blank表示在新窗口打开链接
          // link.target = '_blank'
          link.href = res.data.data
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        } else {
          this.$message.error(res.data.msg);
        }
      })
    },
    exportPart() {
      this.exportLoading = true
      this.$http.get(`/events?export=1`, {params: {ids:this.selection.map((item)=>{return item.id}).join(',')}}).then((res) => {
        this.exportLoading = false
        if (res.data.code === 0) {
          this.$message.success(res.data.msg);
          const link = document.createElement('a')
          //_blank表示在新窗口打开链接
          // link.target = '_blank'
          link.href = res.data.data
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
        } else {
          this.$message.error(res.data.msg);
        }
      })
    },
    //选择新建事件类型
    handleCommand(command){
      this.$router.push({path: '/event/addEvent', query: {type: command}})
    },
    //筛选全部
    selectAll(flag) {
      switch (flag){
        case 'activeNum':
          this.activeNum = null
          this.where.type = null
          break;
        case 'statusActiveNum':
          this.statusActiveNum = null
          this.where.status=null
          break;
        case 'dateActiveNum':
          this.dateActiveNum = null
          this.where.date = null
          break;
      }
      this.reload()
    },
    //根据时间筛选
    searchByDate(item, index) {
      this.dateActiveNum = index
      let date=null
      if(item){
         date = item[(Object.keys(item)[0])]
      }
      this.handelDateSearch(date)
    },
    handelDateSearch(date) {
      this.where.date = date
      this.reload()
    },
    //根据事件状态视角搜索
    searchByStatusVersion(item, index) {
      this.statusActiveNum = index
      this.handelStatusSearch(item)
    },
    //状态搜索请求
    handelStatusSearch(item) {
      localStorage.removeItem('event_status')
      this.where.status = item
      this.reload()
    },
    //点击类型筛选
    searchByType(item,index){
      this.activeNum = index
      this.handelTypeSearch(item)
    },
    //事件类型搜索
    handelTypeSearch(item) {
      this.where.type = item
      this.reload()
    },
    /* 刷新表格 */
    reload() {
      this.url = '/events';
      this.$refs.table.reload({ where: this.where });
    },
    /* 重置搜索 */
    reset() {
      this.activeNum = null,
        this.statusActiveNum = null,
        this.createActiveNum = null,
        this.dateActiveNum = null,
      this.where = {};
      this.reload();
    },
    /* 显示编辑 */
    openEdit(row) {
      this.$refs.productFormRef.showDialog(row ? "edit" : "add", row);
    },
  }
}
</script>

<style scoped lang="scss">
.searchWrap {
  display: flex;
}
.active {
  background: #dcf3fd;
  border-color: #d0f3f4;
  color: #02aef3!important;
  padding: 4px 8px;
}
.searchBox {
  display: flex;
  span {
    color: #a7b5b5;
    display: block;
    width: 110px;
    height: 36px;
    font-size: 16px;
  }
  .searchItem {
    border: 1px solid transparent;
    border-radius: 4px;
    color: gray;
    font-size: 13px;
    margin: 0 12px 8px 0;
    max-width: 160px;
    overflow: hidden;
    padding: 4px 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    font-size: 14px;
  }
}
.btnWrap{
  display: flex;
  .el-button{
    margin-left: 10px;
  }
}
.right-handle-group{
  position: absolute;
  right: 50px;
}
</style>
